<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频教学</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.sPage.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/requestUrl.js"></script>
    <script src="js/jquery.sPage.js"></script>
    <style>
        /*.head-choose .container .active {*/
        /*    background-color: #006633;*/
        /*}*/
        .container {
            width: 1230px;
        }
    </style>
</head>

<body>

    <!-- 头部导航 -->
    <div class="head">
        <div style="background: #006633">
            <div class="container">
                <div style="line-height: 30px;color:#fff;position: absolute;font-size:12px;">山东省足球运动协会欢迎您！</div>
                <div class="do">
                    <div class="does1" style="display: block;">
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/login.html"><span>登录</span></a>
                        |
                        <a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/register.html"><span>注册</span></a>
                    </div>
                    <div class="does2" style="display:none">
                        <span>欢迎<span id="telphone" style="margin:0"></span></span>
                        |
                        <span><a href="http://newtest.sdfa.org.cn/footballAssociation/zuxie/personal.html"
                                id="nickname">个人中心</a></span>
                        |
                        <span class="logout" style="cursor: pointer;">退出</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-choose">
            <div class="container">
                <img src="http://newtest.sdfa.org.cn/webfile//public/headicon.png"
                    style="position: absolute;top: 15px;">
                <a href="http://newtest.sdfa.org.cn/">
                    <div class="headtext">
                        <div class="headtext1">山东省足球运动协会</div>
                        <div class="headtext2">SHANDONG FOOTBALL ASSOCIATION</div>
                    </div>
                </a>
                <div style="display:inline-block;margin-left:302px">
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/index.html?id=67">
                            <div>首页</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/notice.html?id=68">
                            <div>通知公告</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=1">
                                <div>公告规程</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/notice.html?id=68&amp;item=2">
                                <div>政策法规</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="javascript:void(0);">
                            <div>足球专区</div>
                        </a>
                        <div class="choosea-2">
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=70">
                                <div>女足专区</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/prefecture.html?id=71&item=2&child=1">
                                <div>青少年足球</div>
                            </a>
                            <a href="http://newtest.sdfa.org.cn/soccernotice.html?id=72">
                                <div>社会足球</div>
                            </a>
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/otherplace.html?id=87">
                            <div>各地足协</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/shopping/index.htm" target="_blank">
                            <div>商城</div>
                        </a>
                        <div class="choosea-2" target="_blank">
                        </div>
                    </div>
                    <div class="choosea">
                        <a href="http://newtest.sdfa.org.cn/aboutus.html?id=77">
                            <div>关于我们</div>
                        </a>
                        <div class="choosea-2">
                        </div>
                    </div>
                </div>
                <form action="result.html" method="post">
                    <div class="input-group">
                        <input type="text" name="word" value="" autocomplete="off" class="form-control"
                            placeholder="请输入您要搜索的内容">
                        <span class="glyphicon glyphicon-search" onclick="$('.head form').submit()"></span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="clear"></div>
    <div class="center" id="container">
        <div class="position">当前位置：视频教学</div>
        <div class="hot_video">
            <h2>热门视频</h2>
            <ul>
                <li v-for="item in hot_video" :key="item.id">
                    <a :href="'video_show.html?id='+ item.id">
                        <div class="content">
                            <div class="img">
                                <img :src='item.imgUrl' alt="">
                            </div>
                            <div class="play">
                                <img src="img/bofang.png" alt="">
                            </div>
                        </div>
                        <p>{{item.title}}</p>
                        <span>发布时间：{{item.addTime}}</span>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 视频分类 -->
        <div class="type_tab">
            <ul>
                <li @click="changeType(1)" :class="type == 1 ? 'active' : ''">基本功教学</li>
                <li @click="changeType(2)" :class="type == 2 ? 'active' : ''">颠球教学</li>
                <li @click="changeType(3)" :class="type == 3 ? 'active' : ''">技巧教学</li>
                <li @click="changeType(4)" :class="type == 4 ? 'active' : ''">踢球方法</li>
                <li @click="changeType(5)" :class="type == 5 ? 'active' : ''">内侧踢球</li>
                <li @click="changeType(6)" :class="type == 6 ? 'active' : ''">接球带球</li>
                <li @click="changeType(7)" :class="type == 7 ? 'active' : ''">头球技术</li>
                <li @click="changeType(8)" :class="type == 8 ? 'active' : ''">守门员技术</li>
            </ul>
        </div>
        <div class="hot_video">
            <ul>
                <li v-for="item in items" :key="item.id">
                    <a :href="'video_show.html?id='+ item.id">
                        <div class="content">
                            <div class="img">
                                <img :src='item.imgUrl' alt="">
                            </div>
                            <div class="play">
                                <img src="img/bofang.png" alt="">
                            </div>
                        </div>
                        <p>{{item.title}}</p>
                        <span>发布时间：{{item.addTime}}</span>
                    </a>
                </li>
                <p class="count">暂无相关信息~</p>
            </ul>
            <div id="myPage" style="text-align: center;margin:40px 0"></div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer" style="min-width: 100%;">
        <div>
            版权所有：山东省足球运动协会官方网站
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            ICP经营许可证：鲁ICP备15020327号
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            山东乐体网络科技有限公司
        </div>
    </div>
    <script>
        // 全局缓存global_nickName
        var global_nickName = sessionStorage.nickName;
        var global_userId = sessionStorage.userId;
        if (global_userId) {
            $('.do .does1').css('display', 'none')
            $('.do .does2').css('display', 'block')
        } else if (global_nickName == undefined || global_nickName == "") {
            $('.do .does1').css('display', 'block')
            $('.do .does2').css('display', 'none')
        }
        var global_tel = sessionStorage.tel;
        $("#telphone").text(global_tel)
        //退出
        $('.logout').click(function () {
            myAjax('/user/logout', {},
                function (data) {
                    console.log(data)
                    if (data.msg == 0) {
                        sessionStorage.clear()
                        location.reload()
                    }
                },
                function (err) {
                    console.log(err)
                })
        });
        var pageNum = 1;
        var app = new Vue({
            el: "#container",
            data: {
                type: 1,
                items: [],
                hot_video: []
            },
            methods: {
                changeType: function (type = 1) {
                    var that = this;
                    that.type = type;
                    myAjax('/user/video/findVideoPage', {
                            type: type,
                            page: pageNum,
                            limit: 12,
                        },
                        function (data) {
                            console.log(data)
                            that.items = data.data
                            if (data.count == 0) {
                                $('.count').css('display', 'block')
                                $('.page nav').css('display', 'none')
                            } else {
                                $('.count').css('display', 'none')
                                $('.page nav').css('display', 'block')
                            }
                            $("#myPage").sPage({
                                page: pageNum, //当前页码，必填
                                total: data.count, //数据总条数，必填
                                pageSize: 12, //每页显示多少条数据，默认10条
                                showTotal: true, //是否显示总条数，默认关闭：false
                                totalTxt: "共{total}条", //数据总条数文字描述，{total}为占位符，默认"共{total}条"
                                noData: false, //没有数据时是否显示分页，默认false不显示，true显示第一页
                                showSkip: true, //是否显示跳页，默认关闭：false
                                showPN: true, //是否显示上下翻页，默认开启：true
                                prevPage: "上一页", //上翻页文字描述，默认“上一页”
                                nextPage: "下一页", //下翻页文字描述，默认“下一页”
                                backFun: function (page) {
                                    pageNum = page;
                                    that.changeType();
                                }
                            });
                        },
                        function (err) {
                            console.log(err)
                        })
                },
                hot: function () {
                    var that = this;
                    myAjax('/user/video/findVideoList', {},
                        function (data) {
                            console.log(data)
                            that.hot_video = data.videoList
                        },
                        function (err) {
                            console.log(err)
                        })
                }
            },
            created: function () {
                this.hot();
                this.changeType();
            }
        })
    </script>
</body>

</html>